<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">

    <title>table 表格</title>
</head>
<body>
<!--    table-striped 基础表格 table-bordered 带条纹表格 table-hover 悬浮-->
    <table class="table table-striped table-bordered table-hover ">
        <tr class="table-primary">
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
        <tr>
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>

    </table>
<div class="table-responsive">
    <table class="table table-condensed table-bordered">
        <tr class="active">
            <td>这是一条表格内容数据，撑开表格</td>
            <td>鼠标悬停在行或单元格上时所设置的颜色</td>
        </tr>
        <tr class="success">
            <td>这是一条表格内容数据，撑开表格</td>
            <td>标识成功或积极的动作</td>
        </tr>
        <tr class="warning">
            <td>这是一条表格内容数据，撑开表格</td>
            <td>标识警告或需要用户注意</td>
        </tr>
        <tr class="danger">
            <td>这是一条表格内容数据，撑开表格</td>
            <td>标识危险或潜在的带来负面影响的动作</td>
        </tr>
        <tr class="info">
            <td>这是一条表格内容数据，撑开表格</td>
            <td>标识普通的提示信息或动作</td>
        </tr>
    </table>
</div>


</body>
</html>